
<template>
  
  <div class="app-container">
    
    <p style="font-size: 14px;"><b style="font-size: 20px;">人员管理</b> 用于管理小区里每个住户的基本信息，包括业主、家庭成员及租户等信息</p>
    <!-- 搜索区域 -->
    <el-card class="box-card" style="margin-bottom: 20px;">
      <el-form label-width="80px" :inline="true" label-position="top">
        <el-form-item label="小区名称" style="width: 150px;">
          <el-select v-model="queryData.community_code" placeholder="请选择" @change="communityChange">
            <el-option v-for="item in CommunityAllList" :key="item.id" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栋数" style="width: 150px;">
          <el-select v-model="queryData.building_code" placeholder="请选择">
            <el-option v-for="item in BuildingList" :key="item.id" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员姓名">
          <el-input v-model="queryData.name" placeholder="请选择"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="queryData.identity_id" placeholder="请选择"></el-input>
        </el-form-item>

        <el-form-item style="margin-top: 30px;">
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button style="margin-right: 10px;" @click="onReset">重置</el-button>
          <el-button type="text" style="color: #409eff; size: 16px;" v-if="!isShow" @click="isShow = !isShow">展开<el-icon>
              <ArrowDown />
            </el-icon></el-button>
          <el-button type="text" style="color: #409eff; size: 16px;" v-else @click="isShow = !isShow">收起<el-icon>
              <ArrowUp />
            </el-icon></el-button>
        </el-form-item>

        <el-form-item label="联系方式" v-if="isShow">
          <el-input v-model="queryData.tel" placeholder="请选择"></el-input>
        </el-form-item>

        <el-form-item label="性别" v-if="isShow">
          <el-select v-model="queryData.gender" placeholder="请选择">
            <el-option v-for="item in genderList" :key="item.id" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员类型" v-if="isShow">
          <el-select v-model="queryData.owner_type" placeholder="请选择">
            <el-option v-for="item in useMemberList" :key="item.id" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" v-if="isShow">
          <DataSelect v-model="queryData.create_time" ref="datePick"></DataSelect>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 工具区域 -->
    <el-card class="box-card">
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" style="margin-right: 5px;" @click="addRef.isShow = true">添加信息</el-button>
          <el-icon style="margin-right: 5px;">
            <RefreshRight />
          </el-icon>
          <el-icon style="margin-right: 5px;">
            <Share />
          </el-icon>
          <el-icon>
            <Tools />
          </el-icon>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table border :data="list" style="width: 100%">
        <el-table-column prop="date" label="小区名称">
          <template #default="{ row }">
            {{ row.community.name }}
          </template>
        </el-table-column>
        <el-table-column label="栋数" width="113">
          <template #default="{ row }">
            {{ row.building.name }}
          </template>
        </el-table-column>
        <el-table-column label="房产名称" width="80">
          <template #default="{ row }">
            {{ row.house.name }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="成员姓名" width="80" />
        <el-table-column prop="name" label="照片" width="70">
          <template #default="{ row }">
            <imagePreview :src="row.photo" :width="50" :height="50" />
          </template>
        </el-table-column>
        <el-table-column prop="identity_id" label="身份证号" />
        <el-table-column prop="tel" label="联系方式" />
        <el-table-column prop="birth" width="78" label="生日" />
        <el-table-column label="性别" width="40">
          <template #default="{ row }">
            {{ showState(row.gender) }}
          </template>
        </el-table-column>
        <el-table-column label="成员类型" width="60">
          <template #default="{ row }">
            {{ showsUer(row.owner_type) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="创建时间">
          <template #default="{ row }">
            {{ formatTimeAll(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" align="center" width="103">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="text">修改</el-button>
            <el-button @click="delRow(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br>
      <!-- 分页区域 -->
      <el-row justify="end">
        <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
        v-model:page-size="queryData.pageSize" layout="total, prev, pager, next" :total="total" background>
        </el-pagination>
      </el-row>

      <!-- 新增修改 -->
      <addForm ref="addRef" @updateList="initData"></addForm>
    </el-card>
    <!-- </el-card> -->
    <p class="foot">Element UI黑马前端合肥前端欢迎您
    <p>@2023 地表最强集团</p>
    </p>
  </div>
</template>

<script setup name="Index">
// import Pagination from '@/components/Pagination/index.vue'
import DataSelect from '@/components/Select/index.vue'
import { useGenderState, useMemberStatus, formatTimeAll, useCommunityAllList } from '@/hooks/hooks'
import { onMounted, reactive, ref } from 'vue';
import { memberListApi, delmemberListApi, buildingListApi } from '@/api/owners'
import imagePreview from "@/components/ImageHj/index";
import { ElMessage } from "element-plus";
import addForm from './addForm';

// ===========================
// 男女
const genderList = useGenderState(false)
// 业主状态
const useMemberList = useMemberStatus()
// 小区名称
const CommunityAllList = useCommunityAllList()
//小区栋数
// const getTime=formatTimeAll()
// ===========================
// ---------------列表功能-------------
const queryData = reactive({
  name: '',
  current: 1,
  pageSize: 2,
  building_code: '',
  create_time: '',
  community_code: '',
  tel: '',
  gender: '',
  identity_id: '',
  owner_type: ''
})

let isShow = ref(false)
const addRef = ref();
const datePick = ref([])
const total = ref(0)
const list = ref([])
let BuildingList = ref([])
const initData = async () => {
  let { data: { rows, count } } = await memberListApi(queryData)
  console.log({ data: { rows, count } });
  list.value = rows
  total.value = count
}
onMounted(() => {
  initData()
})
// 显示男女文字
const showState = (val) => {
  let res = genderList.find((item) => item.value === val * 1);
  return res ? res.label : '保密'
};
// 显示成员类型文字
const showsUer = (val) => {
  let res = useMemberList.find((item) => item.value === val * 1);
  return res ? res.label : '未知'
};

// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};

// --------------------------------搜索功能------
const communityChange = async (val) => {
  queryData.building_code = null
  const { data } = await buildingListApi(val)
  BuildingList.value = data
  console.log(BuildingList);
}
// 搜索
const onSearch = () => {
  queryData.current = 1;
  initData();
};
// 重置
const onReset = () => {
  Object.assign(queryData, {
    name: '',
    current: 1,
    pageSize: 2,
    building_code: null,
    create_time: '',
    community_code: null,
    tel: '',
    gender: '',
    identity_id: '',
    owner_type: ''
  });
  datePick.value.time = []
  initData();
};

// --------------------------------修改功能------
const editRow = (id) => {
  addRef.value.replyData(id);
};

// --------------------------------删除功能------
const delRow = async (id) => {
  await confirm('确定删除吗？')
  await delmemberListApi(id);
  ElMessage.success("删除成功");
  initData();
};

</script>

<style scoped>
.header {
  position: absolute;
  top: 15px;
  left: 80px;
  display: flex;
  align-items: center;
}

.tille {
  font-weight: 700;
  font-size: 20px;
}

.foot {
  text-align: center;
  font-size: 14px;
}
</style>